<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章编辑页面</title>
    <!-- css 样式文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="js/jedate/css/jedate.css">
    <!-- js样式文件 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jedate/js/jedate.js"></script>
    <script src="js/template-web.js"></script>
     <!-- tinymce 富文本编辑器 -->
    <script src="js/tinymce/tinymce.min.js"></script>
    <script src="js/tinymce_setup.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="common_title">
            文章编辑
        </div>
        <div class="container-fluid common_con">
            <form id="f1" class="form-horizontal article_form">
                <input type="hidden" id='hidId' name="id">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">文章标题：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name='title' id="txtTitle" value="文章标题文字">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">文章封面：</label>
                    <div class="col-sm-10">
                        <img src="images/pic06.jpg" class="article_cover" id="imgCover">
                        <input type="file" name='cover' id="exampleInputFile">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">文章类别：</label>
                    <div class="col-sm-4">
                        <select id="selCate" name='categoryId' class="form-control"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">发布时间：</label>
                    <div class="col-sm-4">

                        <div class="input-group">
                            <input type="text" class="form-control" value="2019-05-17" id="dateinput" name='date'>
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button"
                                    onclick="jeDate('#dateinput',{trigger:false,format: 'YYYY-MM-DD'})">
                                    <i class="iconfont icon-icondate"></i>
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">文章内容：</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" id="rich_content"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button id='btnOk' type="button" class="btn btn-success">修改</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
<!-- 分类下拉框 模板引擎 begin -->
<script id='optionTepmlate' type="text/html">
    <option value="">所有分类</option>
    {{each data v}}
       <option value="{{v.id}}">{{v.name}}</option>
    {{/each}}
    </script>
<!-- 分类下拉框 模板引擎 end -->

<script>
    $(function () {
        loadArtCateList();
        queryArticle();
    });
    // 1. 加载文章分类 下拉框的数据 -------------------------------
    // a.异步请求 所有文章分类 数据
    // b.遍历 文章分类，生成 下拉框选项

    //1.1 业务目标：加载文章分类 下拉框数据
    function loadArtCateList() {
        $.ajax({
            url: 'http://localhost:8080/admin/category/list',
            method: 'get',
            success: function (backData) {
                if (backData.code == 200) {
                    // 调用模板引擎api
                    var strHtml = template('optionTepmlate', backData);
                    // 将 生成的 Html 字符串 设置到 文章类别下拉框 中
                    $('#selCate').html(strHtml);
                }
            }
        });
    }

    // 2. 获取 要编辑的 文章 内容 --------------------------------
    // a. 先通过 js 获取 url 中的 id 值
    // b. 异步请求 服务器 接口，根据 id 查询文章 内容返回
    // c. 通过 js 将 文章各个内容 设置给 页面表单不同的元素中
    function queryArticle() {
        // console.log(window.location.search); // ?id=223
        var aId = window.location.search.split('=')[1]; // ["?id", "223"]

        $.ajax({
            url: 'http://localhost:8080/admin/article/search',
            data: 'id=' + aId,
            method: 'get',
            success: function (backData) {
                
                $('#hidId').val(backData.data.id);
                $('#txtTitle').val(backData.data.title);
                $('#imgCover').attr('src', backData.data.cover);
                $('#selCate').val(backData.data.categoryId);
                $('#dateinput').val(backData.data.date);

                // 直接 将 要修改的 文章内容 设置 给 文本域
                // tinymce 在加载完毕后，就会 自动 读取 文本域 中的 内容，显示到 富文本编辑器中
                $('#rich_content').val(backData.data.content);

                // 此句会容易因为 编辑器 尚未加载完成 而 报错！
                // tinyMCE.activeEditor.setContent(backData.data.content);
            }
        });
    }

    // 3. 确认修改 操作 -------------------------------------------
    // a. 通过 fromData 获取 页面上所有数据
    // b. 异步将 formdata 数据 发送到 服务器 编辑文章接口
    // c. 当求改成功后，调回到 文章列表页面
    $('#btnOk').click(function(){
        var fd = new FormData($('#f1')[0]);

        //b.需要 把 富文本编辑器中的 文章内容 获取
        var contentStr = tinyMCE.activeEditor.getContent();
        fd.append('content', contentStr);

        $.ajax({
            url: 'http://localhost:8080/admin/article/edit',
            method: 'post',
            data: fd,
            contentType: false,
            processData: false,
            success: function (backData) {
                if (backData.code == 200) {
                    alert('修改成功');
                    window.location = './article_list.html';
                }
            }
        });
    });

</script>
</html>